<template>
  <div class="home-topbar">
    <img src="../../assets/images/logo.png" alt="logo" class="logo-img">
    <div class="context-block">
      <div
        class="url-item"
        v-for="(item, i) in urlList"
        :key="i"
        :style="{ color: item.color || 'white' }"
      >{{ item.name }}</div>
      <div class="vip-btn">会员中心</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeTopbar',
  data() {
    return {
      urlList: [
        { name: '严打违规文件公告及非法有害信息举报', url: 'http://yun.baidu.com/res/static/notic.html', color: 'red' },
        { name: '百度首页', url: 'https://www.baidu.com/' },
        { name: '客户端下载', url: 'https://pan.baidu.com/download' },
        { name: '官方微博', url: 'https://weibo.com/p/1006062952668222' },
        { name: '问题反馈', url: 'https://passport.baidu.com/v2/' },
        { name: '企业认证', url: 'https://pan.baidu.com/disk/cert/#/web/home' },
        { name: '开放平台', url: 'https://pan.baidu.com/union' },
      ]
    }
  }
}
</script>

<style lang="less">
.home-topbar {
  width: 100%;
  min-width: 1002px;
  height: 60px;
  padding: 0 25px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .logo-img {
    height: 33px;
    width: 157px;
  }

  .context-block {
    font-size: 14px;
    div {
      display: inline-block;
      cursor: pointer;
    }
  }

  .url-item {
    margin-right: 23px;
    margin-top: 12px;
    &:hover {
      text-decoration: underline;
    }
  }
  
  .vip-btn {
    width: 76px;
    height: 27px;
    background: linear-gradient(-139deg,#f0d7a3 0,#efcb85 100%) #f0d7a3;
    padding: 4px 10px;
    border-radius: 20px;
    box-sizing: border-box;
    margin-right: 20px;
    &:hover {
      background: #e7c062;
    }
  }
}
</style>